<template>
	<div class="view">
		<div class="tips" v-if="isEmpty">
			<p class="text">建议您到医院检查就医</p>
		</div>
		<view class="tips2">
			<text>温馨提示：</text>
			<text>部分症状图可能引起不适，请自行选择查看</text>
		</view>
		<scroll-view class="container-box" scroll-y :scroll-into-view='scrollTo' scroll-with-animation>
			<view style="height:100rpx;display:block"></view>
			<view v-for="(item, index) in chatList" :key="index" :id="'item' + (item.id || index)">
				<div class="chat-box left" v-if="item.id" style="justify-content: flex-start;">
					<image class="icon" src="/static/images/ic_logo.png">
						<div class="question-box">
							<p class="question"><text v-if="item.diseaseIndex > 0">追问：</text>{{item.problemDescription}}
							</p>
							<view v-if="item.imageUrl && item.isShowImage">
								<image v-for="(it, ix) in item.imgs" :key="ix" :src="it" mode="widthFix"></image>
							</view>
							<view class="lookImage" v-if="item.imageUrl">
								<text @click="onCheckShowImg(index)">
									{{item.isShowImage?'隐藏':'查看'}}症状图
								</text>
							</view>
							<view class="lookImage" v-if="item.videoUrl">
								<text @click="playVideo(item.videoUrl)">播放症状视频</text>
							</view>
							<div class="btn-box">
								<div class="btn no-click" @click="btnAnswer(1, index)">是</div>
								<div class="btn no-click" @click="btnAnswer(0, index)">否</div>
							</div>
						</div>
				</div>
				<div class="chat-box right" v-else style="justify-content: flex-end;">
					<p class="text">{{item.text}}</p>
					<img class="icon" :src="avatar">
				</div>
			</view>
		</scroll-view>
	</div>
</template>

<script>
	import {
		getOneInfoByDiseaseId
	} from '../../../apis/request.js';
	export default {
		data() {
			return {
				id: null,
				type: null,
				list: [],
				chatList: [],
				avatar: '',
				isEmpty: false,
				indexList: 1,
				diseaseList: [],
				scrollTo: ''
			}
		},
		onLoad(options) {
			this.type = options.type
			this.id = options.id
			this.avatar = uni.getStorageSync('userInfo').avatar
			this.getAPiIndexData()
		},
		methods: {
			// 请求问题列表
			getAPiIndexData() {
				let data = {
					symptomId: this.id,
					peopleType: this.type
				}
				this.$api.http(
					'/sms/smsBodyPartsInfo/api/n/listSymptomProblemBySymptomId',
					'GET', data, res => {
						if (!res.data.result.length) {
							this.isEmpty = true
							return
						}
						this.list = res.data.result.map((item, index) => {
							this.$set(item, 'imgs', item.imageUrl ? item.imageUrl.split(',') : [])
							this.$set(item, 'isShowImage', false)
							this.$set(item, 'index', index)
							this.$set(item, 'diseaseIndex', 0)
							return item
						})
						this.chatList.push(this.list[0])
					}
				)
			},
			// 根据疾病id获取问题列表 点击是调用的接口
			async getApiQuestion(diseaseId) {
				const that = this
				const res = await getOneInfoByDiseaseId({
					diseaseId,
					symptomId: this.id,
					peopleType: this.type
				}).then(res => {
					if (res.length) {
						//有其他疾病问提需要接着展示问题
						this.diseaseList = res.map((item, index) => {
							this.$set(item, 'imgs', item.imageUrl ? item.imageUrl.split(',') : [])
							this.$set(item, 'isShowImage', false)
							this.$set(item, 'index', this.indexList)
							this.$set(item, 'diseaseIndex', index + 1)
							return item
						})
						this.chatList.push(this.diseaseList[0])
						this.$nextTick(function() {
							that.toBottom()
						})
					} else {
						//没有其他疾病问题跳转结果页
						this.goResult(diseaseId, 1)
					}
				})
			},
			// 点击回答
			btnAnswer(type, index) {
				// type = 1 是
				let that = this
				// 当前回答的问题
				const question = this.chatList[index]
				// 如果回答的是更前面点击过的问题,就删除此次回答后的所有数据
				if (index < this.chatList.length - 1) {
					this.chatList.splice(index + 1)
					this.indexList = question.index + 1
				}
				if (type) {
					let obj = {
						text: '是'
					}
					this.chatList.push(obj)
					if (question.problemStatus == 1) {
						// 如果是初始问题，需要去获取疾病问题
						this.getApiQuestion(question.diseaseId)
					} else {
						// 如果是普通问题，说明获取过疾病问题
						const index = question.diseaseIndex || 0
						if (index == this.diseaseList.length) {
							// 问完疾病问题跳转结果页
							this.goResult(question.diseaseId, 1)
						} else {
							this.chatList.push(this.diseaseList[index + 1])
						}
					}
				} else {
					let obj = {
						text: '否'
					}
					this.chatList.push(obj)
					// 点击到最后一个问题的处理
					if (this.indexList > this.list.length - 1) {
						this.$api.http('/sms/smsBodyPartsInfo/api/n/symptomStatistics', 'GET', {
							symptomId: this.id
						}, res => {})
						return uni.showToast({
							title: '您无此症状问题，请选择正确的症状自查！',
							duration: 2000,
							icon: 'none',
						});
					}
					if (question.problemStatus == 1) {
						// 如果是初始问题，接着询问下一个初始问题
						this.chatList.push(this.list[this.indexList])
						this.indexList++
					} else {
						// 如果是普通问题，说明获取过疾病问题
						const index = question.diseaseIndex || 0
						if (index == this.diseaseList.length) {
							// 问完疾病问题跳转结果页
							this.goResult(question.diseaseId, 0)
						} else {
							this.chatList.push(this.diseaseList[index + 1])
						}
					}
				}
				this.$nextTick(function() {
					that.toBottom()
				})
			},
			// 每次点击 都跳到底部
			toBottom() {
				const index = this.chatList.length - 1
				this.scrollTo = 'item' + this.chatList[index].id || index
			},
			// 控制图片的显示和隐藏
			onCheckShowImg(index) {
				this.chatList[index].isShowImage = !this.chatList[index].isShowImage
			},
			// 跳转结果页
			goResult(diseaseId, status) {
				uni.navigateTo({
					url: `/pages/other/result/main?id=${diseaseId}&type=${this.type}&status=${status}`
				})
			},
			playVideo(videoUrl) {
				uni.navigateTo({
					url: '/pages/CommunityPages/video/video?src=' + encodeURIComponent(videoUrl)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.view {
		.tips {
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: center;
			padding-bottom: 100upx;

			.text {
				color: #808080;
				font-size: 28rpx;
				text-align: center;
			}
		}

		.tips2 {
			position: fixed;
			top: 0;
			z-index: 100;
			width: 100%;
			padding: 20rpx;
			background: #f9edda;
			font-size: 26rpx;

			text:nth-child(1) {
				color: #DD1D1A;
			}

			text:nth-child(2) {
				color: #e6b664;
			}
		}

		.container-box {
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			height: 100vh;

			.chat-box {
				display: flex;
				width: 100%;
				margin-bottom: 15rpx;

				.icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.question-box {
					margin-left: 25rpx;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					max-width: 480rpx;
					background-color: #fff;

					.lookImage {
						width: 100%;
						display: flex;
						justify-content: center;
						margin: 18rpx 0;

						text {
							display: flex;
							align-items: center;
							align-content: center;
							justify-content: center;
							height: 100rpx;
							background: #32C59A;
							color: #ffffff;
							font-size: 28rpx;
							height: 60rpx;
							width: 200rpx;
							border-radius: 100rpx;
						}
					}

					image {
						width: 100%;
					}

					.question {
						font-size: 28rpx;
						line-height: 1.5;

						text {
							color: red;
						}
					}

					.btn-box {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						align-content: center;
						justify-content: center;

						.btn {
							padding: 8rpx 30rpx;
							box-sizing: border-box;
							font-size: 28rpx;
							border-radius: 30rpx;

							&:not(:last-child) {
								margin-right: 30rpx;
							}
						}

						.is-click {
							color: #aaaaaa;
							border: 1px solid #aaaaaa;
						}

						.no-click {
							color: #32C59A;
							border: 1px solid #32C59A;
						}
					}
				}

				.text {
					padding: 18rpx 25rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					border-radius: 20rpx;
					background-color: #c4edff;
				}

				.icon {
					margin-left: 25rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.left {
				&:not(:first-child) {
					margin-top: 60rpx;
				}
			}

			.right {
				margin-top: 60rpx;
			}
		}
	}
</style>